<template>
    <div class="w-full overflow-scroll" style="background-color: var(--boxborder);">
        <div class="w-full h-20 flex justify-center">
            <p class="text-xl leading-[5rem] ">播放历史记录</p>
        </div>

        <div class="rounded-lg bg-gray-50">
            <div class="flex justify-between border-b-[2px] border-gray-200">
                <p>共{{ data?.data.length }}首歌曲</p>
                <p class="cursor-pointer mr-2 font-bold" @click="PushInPlayList()">播放全部</p>
            </div>
            <div class="flex justify-between h-12 leading-[3.5rem] border-b-[1px]">
                <div class="w-[35%]">
                    <p class="pl-8"><a>名称</a></p>
                </div>
                <div class="w-[35%]">
                    <p>专辑</p>
                </div>
                <div class="w-[20%]">
                    <p>艺术家</p>
                </div>
                <div class="w-[10%]">
                    <p>时长</p>
                </div>
            </div>
            <div v-for="item, index in data?.data" :key="index"
                class="flex justify-between h-14 leading-[3.5rem] px-2 hover:bg-gray-100  even:bg-gray-100  text-gray-700 overflow-hidden text-ellipsis text-sm odd:bg-gray-50">
                <div class="flex w-[35%]">
                    <p class="w-6">{{ index + 1 }}</p>
                    <img :src="item.cover" alt="封面" class="h-10 w-10 mx-0 my-auto  rounded-sm">
                    <p @click="router.push(`/musicDetail/${item.musicId}`)" class="cursor-pointer" title="跳转详情"> &emsp;{{
                        item.musicName
                    }}</p>
                </div>
                <p class="w-[35%]">{{ item.albumName }}</p>
                <div class="w-[20%]">
                    <p>{{ item.singer }}</p>
                </div>
                <p class="w-[10%]">{{ setTime(item.time.toString()) }}</p>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { setTime } from '~~/hook/format';
import { usePlayStore } from '~~/store';
import { useUserStore } from '~~/store/user';
const router = useRouter();
const user = useUserStore();
const store = usePlayStore();
interface req {
    code: number,
    message: string,
    data: any
}
const { data, refresh } = await useAsyncData<req>('history', () => $fetch('/api/playHistory/getHistory', { query: { username: user.username } }));
const PushInPlayList = function () {
    let arr = []
    for (let i = 0; i < data.value?.data.length; i++) {
        let tempdata = {
            cover: data.value?.data[i].cover,
            name: data.value?.data[i].musicName,
            id: Number(data.value?.data[i].musicId),
            album: data.value?.data[i].albumName,
            dt: data.value?.data[i].time,
            singer: data.value?.data[i].singer
        }
        arr.push(tempdata)
    }
    store.$patch({
        currentMusicIndex: 0,
        playList: arr, playStatus: true,
        currentId: data.value?.data[0].musicId
    })
}
watch(() => store.currentId, newvalue => {
    refresh()
})
</script>